<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Unbootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Le styles -->
    <link href="unbootstrap.css" rel="stylesheet">
    <!-- Un javascript du fromage -->
    <script type="text/javascript" src="//joes.googlecode.com/hg/joes.js"></script>

<style>
/*
* Custom styling, unbootstrap doesn't come with a set font type
* Nope, not even the buttons, so you
*/

@import url(http://fonts.googleapis.com/css?family=Over+the+Rainbow);
.container h1 {font-family: 'Over the Rainbow', cursive;}
#feautures h2 {color:#ccc}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-image: url(assets/grid-18px-masked.png);
  background-repeat: repeat-x;
  background-position: 0 40px;
}

#showoff p{color:#333;}
.brand a {
  padding-right: 10px;
  padding-left: 0;
  margin-left: 20px;
  font-weight: bold;
  color: #000;
  text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125);
          transition: all .2s linear;
}
menu {margin-left:-65px;}

</style>

  </head>
<!-- You can style the header -->
<header class="dark fixed">
<h1 class="brand pull-right"><a href="index.html">Unbootstrap</a></h1>
<menu>
	<ul>
	<li><a href="#zfeautures">feautures</a></li>
	<li><a href="basics.html">base css</a></li>
	<li><a href="components.html">components</a></li>
	<li><a href="examples.html" class="nohref dropdown-toggle">examples</a>
<ul class="dropdown-menu">
<li><a>sdfdf</a></li>
<li><a>sdfdf</a></li>
<li><a>sdfdf</a></li>
</ul>
       </li>
	</ul>
</menu>
</header>

    <div class="container">

<!-- Masthead
================================================== -->
<div class="jumbotron center">

    <h1 class="bigtext">Unbootstrap <sup>beta</sup></h1>
    <p class="notsobigtext">Minimalistic HTML5, CSS, and Javascript for responsive design. <em>With a twist.</em></p>
    <p class="download-info">
      <a href="#dontclick" class="btn btn-primary btn-large dialog" >Don't click here</a>
      <a href="https://code.google.com/p/unbootstrap/source/checkout" class="btn btn-large icon-ok" >Get Unbootstrap <small>(v0.1)</small></a>
    </p>


</div>

<hr/>
<!--Most visitors will problaby already hit the back button, before they reached this point-->
<hgroup id="feautures" class="center">
  <h1>Kept simple, so it doesn't get in your way</h1>
  <h2>Inspired by the beautifull Bootstrap from Twitter</h2>
</hgroup>
<hr id="zfeautures" class="spacer" />
  <section class="showoff row">

    <article class="span4">

      <h2 class="icon-user"> Pure HTML5</h2>
      <p>Take advantage of the HTML5 syntax and minimize your tags. Use classes.</p>
    </article>
    <article class="span4">
     <h2 class="icon-ok"> No font-type</h2>
      <p>Unbootstrap has no font-type declarations thus addopts your set style completly</p>
    </article>
    <article class="span4">
      <h2 class="icon-call"> Cross-everything</h2>
      <p>Tablets, phone's, settop, desktop, screenreaders and legacy browsers</p>
    </article>
  </section><!--/row-->
  <section class="showoff row">
    <article class="span4">
 
      <h2 class="icon-coffee"> Bootstrap compatible</h2>
      <p>Unbootstrap is not as cool and advanced as Bootstrap.</p>
    </article>
    <article class="span4">

      <h2 class="icon-updown"> Responsive design</h2>
      <p>Responsive by default. Resize this window the find out.</p>
    </article>
    <article class="span4">

      <h2 class="icon-wheelchair"> Accessible</h2>
      <p>Unbootstrap clean syntax helps</p>
    </article>
  </section><!--/row-->
  <section class="row">
    <article class="span4">

      <h2 class="icon-star"> Rapid prototyping</h2>
      <p>Only 10kb (unminified), just use this as an CDN.</p>
    </article>
    <article class="span4">
      <h2 class="icon-info"> Almost Agnostic</h2>
      <p>Unbootstrap is compatible with Joes, Zepto, jQuery. But is optimised for Joes</p>
    </article>
    <article class="span4">

      <h2 class="icon-radioactive"> Unicode Images</h2>
      <p>However not fully (yet) supported on al devices. <a href="http://en.wikipedia.org/wiki/Mapping_of_Unicode_characters">Unicode Characters</a>. Ofcourse!</p>
    </article>
  </section><!--/row-->
  <section class="row">
    <article class="span3">

      <h3 class="icon-five"> Valid HTML5</h3>
      <p>Built to support new HTML5 elements and syntax.</p>
    </article>
    <article class="span3">

      <h3 class="icon-tree"> Valid CSS3</h3>
      <p>Progressively enhanced components for ultimate style.</p>
    </article>
    <article class="span3">

      <h3 class="icon-victory"> Open-source</h3>
      <p><a href="http://www.gnu.org/licenses/lgpl.html">LGPL</a> licenced. For commercial, personal, etc. usage. </p>
    </article>
    <article class="span3">

      <h3 class="icon-hart"> Less powered</h3>
      <p>Approx 39000 <strong>less</strong> lines than Twitter's bootstrap.</p>
    </article>
  </section><!--/row-->

<hr class="spacer" />
<hgroup class="center">
  <h1>Built with Unbootstrap.</h1>
  <h3>Cool sites build with unbootstrap</h3>
</hgroup>
  <ul class="thumbnails example-sites">
    <li class="span3">
      <a class="thumbnail" href="http://soundready.fm/" target="_blank">
        <img src="assets/.png" alt="SoundReady.fm">
      </a>
    </li>
    <li class="span3">
      <a class="thumbnail" href="http://kippt.com/" target="_blank">
        <img src="assets/.png" alt="Kippt">
      </a>
    </li>
    <li class="span3">
      <a class="thumbnail" href="http://www.fleetio.com/" target="_blank">
        <img src="assets/.png" alt="Fleetio">
      </a>
    </li>
    <li class="span3">
      <a class="thumbnail" href="http://www.jshint.com/" target="_blank">
        <img src="assets/.png" alt="JS Hint">
      </a>
    </li>
  </ul>

<hr />

     <!-- Footer
      ================================================== -->
      <footer>

        <p><a href="//jan-karel.appspot.com/">By <em>JK</em></a>. Licensed under <a href="http://www.gnu.org/licenses/lgpl.html">LGPL</a>.</p>
      </footer>

 

<div id="dontclick" class="modal hide">
<div class="modal-header">
    <span class="close_dontclick close_button">&times;</span>
    <h2>Hurray, we've got fancy modals!</h2>
  </div>
  <div class="modal-body"> <p class="info" id="hopsakee">
<span class="close_hopsakee close_button">&times;</span>
<strong>But you'll will realy love it if you know how flexable they are.</strong>   </p>
<p>Pulldowns</p>


</div>

</div>
   </div><!-- /container -->

    <script type="text/javascript" src="//joes.googlecode.com/hg/timon.js"></script> 
  </body>
</html>
